<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      width: 400px;
      height: 400px;
      border: 10px solid red;
      position: relative;
      top: 10px;
      left: 10px;
    }
    .son {
      width: 100px;
      height: 100px;
      border: 10px solid green;
      position: absolute;
      top: 110px;
      left: 110px;
    }
  </style>
</head>
<body>
  <input type="button" value="offset()" id="btn1"/>
  <input type="button" value="position()" id="btn2"/>
  <div id="father" class="father">
    <div id="son" class="son"></div>
  </div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //1.offset()
    //获取会得到一个对象,对象里面包含了top和left的值.
    //offset方法获取元素距离document的位置
    $('#btn1').click(function () {
      console.log($('#son').offset());
    });


    //2.position();
    //获取会得到一个对象,对象里面包含了top和left的值.
    //position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
    $('#btn2').click(function () {
      console.log($('#son').position());
    });

  });
</script>